<template lang="">
  <div class="category">
    <div class="category-head">
      <router-link to="/home/search" tag="div">
        <van-icon name="search" size="16px" />
        <span>商品搜索,共{{ total }}款好物</span></router-link
      >
    </div>
    <div class="main">
      <ul class="silderBar">
        <li
          v-for="item in categoryList"
          :key="item.id"
          :class="{ active: activeKey == item.id }"
          @click="silderClick(item)"
        >
          {{ item.name }}
        </li>
      </ul>
      <div class="content">
        <div class="banner">
          <img :src="currentInfo.banner_url" />
        </div>
        <div class="title">{{ currentInfo.name }}分类</div>
        <div class="list">
          <router-link
            tag="div"
            class="item"
            v-for="item in currentInfo.subList"
            :key="item.id"
            :to="`/category/goods?id=${item.id}`"
          >
            <img :src="item.wap_banner_url" />
            <p>{{ item.name }}</p>
          </router-link>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { indexaction, currentaction } from "@/api/category/index";
export default {
  data() {
    return {
      total: 520,
      categoryList: [],
      activeKey: 1005000,
      currentInfo: {},
    };
  },
  methods: {
    silderClick(item) {
      this.activeKey = item.id;
      currentaction({
        id: item.id,
      }).then((res) => {
        console.log(res);
        this.currentInfo = res.data.data.currentOne;
      });
    },
  },
  async created() {
    // 获取导航列
    let res = await indexaction();
    this.categoryList = res.data.categoryList;
    this.silderClick({ id: this.activeKey });
  },
};
</script>
<style lang="scss" scoped>
@import "./index.scss";
</style>
